@extends('cms/system/admin/template/theme_default/common')
@section('page-body')
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form layui-form-pane" id="tencent-config-form" lay-filter="tencent-config-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">所属应用</label>
                        @if(isset($app) && $app)
                            <div class="layui-input-block">
                                <input id="app-id" class="layui-input" type="hidden" name="app_id" value="{{$app['id'] ?? 0}}" />
                                <input class="layui-input" type="text" value="{{$app['name'] ?? ''}}" placeholder="请选择所属应用" autocomplete="off" lay-verify="required" required readonly />
                            </div>
                        @else
                            <div class="layui-input-block">
                                <input id="app-id" class="layui-input" type="hidden" name="app_id" value="{{$data['app_id'] ?? 0}}" />
                                <input id="app-select" class="layui-input" type="text" value="{{$data['app']['name'] ?? ''}}" placeholder="请选择所属应用" autocomplete="off" lay-verify="required" required readonly />
                            </div>
                        @endif
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">配置名称</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="name" value="{{$data['name'] ?? ''}}" placeholder="请输入配置名称" autocomplete="off" lay-verify="required" required />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">客户端名</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="client_class" value="{{$data['client_class'] ?? ''}}" placeholder="请输入客户端类" autocomplete="off" lay-verify="required" required />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">请求地址</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="request_url" value="{{$data['request_url'] ?? ''}}" placeholder="请输入请求地址" autocomplete="off" lay-verify="required" required />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">请求类名</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="request_class" value="{{$data['request_class'] ?? ''}}" placeholder="请输入请求类名" autocomplete="off" lay-verify="required" required />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">请求方法</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="request_action" value="{{$data['request_action'] ?? ''}}" placeholder="请输入请求方法" autocomplete="off" lay-verify="required" required />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <fieldset class="layui-elem-field">
                            <legend>
                                <span>输入参数</span>
                                <a class="layui-btn layui-btn-normal layui-btn-xs" onclick="createInputItemFunc()"><i class="layui-icon layui-icon-edit"></i>添加</a>
                            </legend>
                            <div class="layui-field-box layui-form-pane">
                                <div id="input-area"  class="layui-collapse" lay-accordion>
                                    @if(isset($data['setting']['input']))
                                        @foreach($data['setting']['input'] as $input_k => $input_v)
                                            <div class="layui-colla-item">
                                                <h2 class="layui-colla-title">参数-{{$input_k}}</h2>
                                                <div class="layui-colla-content layui-show">
                                                    <div class="layui-form-item">
                                                        <label class="layui-form-label">参数字段</label>
                                                        <div class="layui-input-block">
                                                            <input class="layui-input" type="text" name="setting[input][{{$input_k}}][field]" value="{{$input_v['field']}}" placeholder="请输入参数字段" autocomplete="off" lay-verify="required" required />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </fieldset>
                        <fieldset class="layui-elem-field">
                            <legend>
                                <span>输出参数</span>
                                <a class="layui-btn layui-btn-normal layui-btn-xs" onclick="createOutputItemFunc()"><i class="layui-icon layui-icon-edit"></i>添加</a>
                            </legend>
                            <div id="output-area" class="layui-field-box layui-form-pane">
                                @if(isset($data['setting']['output']))
                                    @foreach($data['setting']['output'] as $output_k => $output_v)
                                        <div class="layui-colla-item">
                                            <h2 class="layui-colla-title">参数-{{$output_k}}</h2>
                                            <div class="layui-colla-content layui-show">
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">参数字段</label>
                                                    <div class="layui-input-block">
                                                        <input class="layui-input" type="text" name="setting[input][{{$output_k}}][field]" value="{{$output_v['field']}}" placeholder="请输入参数字段" autocomplete="off" lay-verify="required" required />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </fieldset>
                    </div>
                    <div class="layui-form-item layui-hide">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <input class="layui-btn" type="button" value="添加" id="submit-create" lay-submit lay-filter="submit-create" />
                            <input class="layui-btn" type="button" value="更新" id="submit-update" lay-submit lay-filter="submit-update" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @verbatim
        <script type="text/html" id="input-template">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">参数-{{ d.index }}</h2>
                <div class="layui-colla-content layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label">参数字段</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="setting[input][{{ d.index }}][field]" value="" placeholder="请输入参数字段" autocomplete="off" lay-verify="required" required />
                        </div>
                    </div>
                </div>
            </div>
        </script>
    @endverbatim
    <script type="text/javascript">
        layui.config({
            base: '/layui-admin/'
        }).extend({
            index: 'lib/index'
        }).use(['index'], function () {
            // 输入区域
            var inputArea = layui.$('#input-area');
            // 输入模板
            var inputTemplate = layui.$('#input-template').html();

            // 选择应用
            layui.$('#app-select').on('click', function () {
                // region 处理已选中 +++++
                var selectValueDom = layui.$('#app-id');
                var selectValue = selectValueDom.val();
                var selectTextDom = layui.$('#app-select');
                // endregion

                var selectLayer = top.layui.layer.open({
                    type: 2,
                    title: '选择',
                    content: layui.setter.mvcLink + '/tencent/admin_app/select?select_multi=0&select_value=' + selectValue,
                    maxmin: true,
                    area: '500px',
                    maxHeight: '500px',
                    btn: ['确定', '取消'],
                    yes: function (index, parentLayer) {
                        console.log(index, selectLayer)
                        // 取得iframe窗口
                        // var iframe = window[parentLayer.find('iframe')[0]['name']];
                        var iframe = top.layui.$('#layui-layer-iframe' + index)[0];
                        var selectResult = iframe.contentWindow.selectConfirm();
                        if (selectResult.data.length != 1) {
                            top.layui.layer.msg('请正确选择所属题库');
                            return false;
                        }
                        var selectText = '';
                        // 清空已有值，避免再次选择重复问题
                        selectValue = '';
                        layui.$.each(selectResult.data, function (data_k, data_v) {
                            if (data_k > 0) {
                                selectValue += ',';
                                selectText += ',';
                            }
                            selectValue += data_v.id;
                            selectText += data_v.id + '#' + data_v.name;
                        });
                        // 设置值
                        selectValueDom.val(selectValue);
                        selectTextDom.val(selectText);
                        top.layui.layer.close(index);
                    }
                });
            });
            // 创建
            layui.form.on('submit(submit-create)', function (data) {
                // 获取提交的字段
                var formField = data.field;
                // formField.content = layui.layedit.getContent(layuiEdit);
                console.log('表单字段：', formField);
                // ajax提交
                layui.$.ajax({
                    url: layui.setter.apiLink + '/tencent/admin_config/create?app_id={{$app['id'] ?? 0}}',
                    type: 'POST',
                    data: formField,
                    success: function (result) {
                        if (result.code != 1) {
                            layui.layer.alert(result.msg);
                            return false;
                        }
                        // 刷新列表
                        window.SOURCE_WINDOW.layui.table.reload('tencent-config-list');
                    }
                });
            });
            // 更新
            layui.form.on('submit(submit-update)', function (data) {
                // 获取提交的字段
                var formField = data.field;
                console.log('表单字段：', formField);
                // ajax提交
                layui.$.ajax({
                    url: layui.setter.apiLink + '/tencent/admin_config/update?app_id={{$app['id'] ?? 0}}&id={{$data['id'] ?? 0}}',
                    type: 'POST',
                    data: formField,
                    success: function (result) {
                        if (result.code != 1) {
                            layui.layer.alert(result.msg);
                            return false;
                        }
                        // 刷新列表
                        window.SOURCE_WINDOW.layui.table.reload('tencent-config-list');
                    }
                });
            });
        });

        /**
         * 创建输入项
         */
        function createInputItemFunc() {
            var inputArea = layui.$('#input-area');
            var inputItemList = inputArea.children();
            var index = inputItemList.length;
            var inputTemplate = layui.$('#input-template').html();
            layui.laytpl(inputTemplate).render({
                index: index
            }, function (html) {
                inputArea.append(html);
                layui.form.render();
            });
        }

        /**
         * 删除答案项
         */
        function deleteAnswerItemFunc(id) {
            layui.$('#topic-answer-' + id).remove();
        }
    </script>
@endsection